<template>
  <splitpanes class="default-theme">
    <pane size="20" :min-size="0" max-size="50">
      <model-list ref="modelRef" @rowClick="selectModel"></model-list>
    </pane>
    <pane size="80" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未打开数据模型</h3>
      <el-tabs v-else v-model="activeName" closable type="border-card" @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.key" :name="item.key" :label="item.modelName">
          <model-info :model-info="item" @save="$refs.modelRef.loadSource()"></model-info>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import '@/theme/splitpanes.css'
import DbTable from "@/views/system/db/DbTable";
import TableManage from "@/views/system/db/TableManage";
import ModelList from "@/views/system/model/ModelList";
import ModelInfo from "@/views/system/model/ModelInfo";
export default {
  name: "ManagerModel",
  components: {ModelInfo, ModelList, TableManage, DbTable, Splitpanes, Pane},
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    selectModel(row) {
      row.key = row.modelId || this.$Util.uuid(6)
      const index = this.tabs.findIndex(item => item.key === row.key)
      if (index < 0) {
        this.tabs.push(row)
      }
      this.activeName = row.key
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.key !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].key
      }
    }
  }
}
</script>

<style scoped>

</style>